<template>
     <div class="row">
    <div class="toggle" @click="toggle">TOGGLE</div>

    <audio-recorder v-if="showRecorder"
      :upload-url="url"
      filename="ninja"
      format="wav"
      :attempts="3"
      :time="2"
      :headers="headers"
      :before-recording="callback"
      :pause-recording="callback"
      :after-recording="callback"
      :select-record="callback"
      :before-upload="callback"
      :successful-upload="callback"
      :failed-upload="callback"
      :bit-rate="192"/>

    <audio-player    :src="mp3" v-if="!showRecorder"/>

      <div  v-if="!showRecorder">
        <el-button @click="endInterview">结束面试</el-button>
    </div>
  </div>
 
</template>

<script>
export default {
    daat(){
        return{
            id:null,
            interviewId:null,
               progress   : 0,
         url:'http://localhost:8868/api/interview/Oss/imagefile/3999',
        mp3: 'https://pinxix-service.oss-cn-beijing.aliyuncs.com/2021-24-31ninja.mp3',
        showRecorder: true,
        headers: {
          'X-Custom-Header': 'some data'
        }
        }
    },
    methods:{
        endInterview(){
            this.$http({
              url: this.$http.adornUrl(`/interview/interviewclass/update`),
              method: 'post',
              data: this.$http.adornData({
                'id':this.id,
                'studentId':1,
                'tearcherId':1,
                'status':2,
                'resumeId':1,
                'invitationId':this.interviewId
              })
            }).then(({data}) => {
            })
             this.$http({
              url: this.$http.adornUrl(`/interview/interviewlog/findByinvitationId/${this.interviewId}`),
              method: 'get',
              data: this.$http.adornData({})
            }).then(({data}) => {
              this.logId = data.obj.id
              this.logTime = JSON.parse(data.obj.logTime)
              this.logTime.push({status:2,date:new Date()})
              this.$http({
                  url: this.$http.adornUrl(`/interview/interviewlog/update`),
                  method: 'post',
                  data: this.$http.adornData({
                    'id':this.logId,
                    'studentId':1,
                    'identificationBit':1,
                    'invitationId':this.interviewId,
                    'logTime': JSON.stringify(this.logTime)
                  })
                }).then(({data}) => {
                })
            })
        },

    callback (msg) {
        console.debug('Event: ', msg)
      },
      toggle () {
        this.showRecorder = !this.showRecorder
      }


        
    },
    mounted(){
        this.id = this.$route.query.id
        this.interviewId = this.$route.query.interviewId
    }
}
</script>

<style>
.interview_class{
    position:fixed;
    top: 115px;
    right: 26px;
    width:85%;
    height:85%;
    background:url("../../../assets/img/interview.jpg");
    opacity: 83%;
    background-size:100% 100%
  }
   .toggle {
    cursor: pointer;
    margin: 20px;
  }
</style>
